<template>
  <el-dialog :visible.sync="show" title="添加用户" width="450px">
    <el-row class="ma_2">
      <el-col :span="8">
        <span>用户类别</span>
      </el-col>
      <el-col :span="16">
        <el-select v-model="roleId" placeholder="请选择用户类别" style="width: 100%;">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row class="ma_2">
      <el-col :span="8">
        <span>用户名</span>
      </el-col>
      <el-col :span="16">
        <el-input v-model="username"></el-input>
      </el-col>
    </el-row>
    <el-row class="ma_2">
      <el-col :span="8">
        <span>登录名</span>
      </el-col>
      <el-col :span="16">
        <el-input v-model="loginName"></el-input>
      </el-col>
    </el-row>
    <el-row class="ma_2">
      <el-col :span="8">
        <span>密码</span>
      </el-col>
      <el-col :span="16">
        <el-input v-model="password"></el-input>
      </el-col>
    </el-row>
    <el-row class="ma_2">
      <el-col :span="8">
        <span>学校</span>
      </el-col>
      <el-col :span="16">
        <el-input v-model="school"></el-input>
      </el-col>
    </el-row>
    <el-row class="ma_2">
      <el-col :span="8">
        <span>邮箱</span>
      </el-col>
      <el-col :span="16">
        <el-input v-model="email"></el-input>
      </el-col>
    </el-row>
    <el-row class="ma_2">
      <el-col :span="8">
        <span>地址</span>
      </el-col>
      <el-col :span="16">
        <area-select :data="pca" type="text" v-model="area" style="line-height: 1.4;"></area-select>
      </el-col>
    </el-row>
    <template slot="footer">
      <el-button @click="show=false">取消</el-button>
      <el-button @click="save" type="primary">保存</el-button>
    </template>
  </el-dialog>
</template>

<script>
import UApi from "../../../api/UserApi";
import { pca } from "area-data";
export default {
  props: {
    visible: Boolean
  },
  data() {
    return {
      show: false,
      roleId: 1,
      username: "",
      loginName: "",
      password: "",
      school: "",
      email: "",
      address: "",
      area: [],
      pca: pca,
      options: [
        {
          label: "管理员",
          value: 1
        },
        {
          label: "教师",
          value: 2
        },
        {
          label: "评审专家",
          value: 3
        },
        {
          label: "高校学生",
          value: 4
        },
        {
          label: "高职学生",
          value: 5
        },
        {
          label: "中小学生",
          value: 6
        },
        {
          label: "企业培训用户",
          value: 7
        }
      ]
    };
  },
  watch: {
    visible: function(val) {
      if (val) {
        this.init();
      }
      this.show = val;
    },
    show: function(val) {
      this.$emit("update:visible", val);
    }
  },
  methods: {
    init() {
      this.roleId = 1;
      this.username = "";
      this.loginName = "";
      this.password = "";
      this.school = "";
      this.email = "";
      this.address = "";
    },
    loadPayload() {
      return {
        roleId: this.roleId,
        username: this.username,
        loginName: this.loginName,
        password: this.password,
        school: this.school,
        email: this.email,
        province: this.area[0],
        city: this.area[1]
      };
    },
    save() {
      this.show = false;
      this.axios.post(UApi.addUser, this.loadPayload()).then(res => {
        if (res.data.status === 0) {
          this.$parent.loadSource();
        }
      });
    }
  }
};
</script>

<style>
</style>